<template>
  <div class="app-container">
    <div class="mainbox">
      <div class="filter-container">
        <el-form ref="filterFormRef" :inline="true" :model="filterForm">
          <el-form-item label="监控名称" prop="monitorName">
            <el-input v-model.trim="filterForm.monitorName" placeholder="请输入监控名称"></el-input>
          </el-form-item>
          <el-form-item label="上游系统" prop="systemId">
            <el-select v-model.trim="filterForm.systemId" placeholder="请选择上游系统">
              <el-option
                v-for="(item) in systemList"
                :key="item.systemId"
                :label="item.systemName"
                :value="item.systemId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="监控状态" prop="monitorSts">
            <el-select v-model.trim="filterForm.monitorSts" placeholder="请选择监控状态">
              <el-option :label="'全部'" :value="''" />
              <el-option v-for="dict in dict.type.monitorStatus" :key="dict.value" :label="dict.label"
                         :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="接入方法" prop="accessType">
            <el-select v-model.trim="filterForm.accessType" placeholder="请选择接入方法">
              <el-option :label="'全部'" :value="''" />
              <el-option label="摄像头" value="1" />
              <el-option label="视频流" value="2" />
            </el-select>
          </el-form-item>
        </el-form>
        <div class="flex-1" />
        <div>
          <el-button type="primary" @click="handleFilter">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </div>
      </div>
      <dt-table
        ref="dtTable"
        v-loading="loading"
        :table-opts="tableOpts"
        row-key="id"
        :pagination-data="{
          total: total,
          queryParams: filterForm
        }"
        @pagination="getList"
      >
      </dt-table>
    </div>
    <moniAccessFormModel
      ref="moniAccessFormModel"
      @success="getList"
      :selectList="systemList"
      :equipmentList="equipmentList"
    />
  </div>
</template>

<script>
import { qryUserSystemAuth as getSystemName } from '@/api/videoFusion/upstreamAccess'
import { getPage, delVideoMonitor, countByMonitor } from '@/api/videoFusion/monitorAccess'
import { getEquipmentName } from '@/api/videoFusion/brandMaintenance'
import moniAccessFormModel from './components/moniAccessFormModel'

export default {
  components: { moniAccessFormModel },
  dicts: ['monitorStatus'],
  data() {
    return {
      systemList: [],
      equipmentList: [],
      filterForm: {
        monitorName: '',
        systemId: '',
        monitorSts: '',
        accessType: '',
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      loading: false,
      tableOpts: {
        rowKey: 'id',
        toolbarBtn: [
          {
            label: '新增',
            permission: ['MONITOR_ACCESS_ADD_BUTTON'],
            type: 'primary',
            icon: 'el-icon-plus',
            click: () => {
              this.handleAdd()
            }
          }
        ],
        tableData: [],
        firstTableCol: {
          select: false
        },
        indexTableCol: {
          index: true
        },
        tableCol: [
          {
            prop: 'monitorName',
            label: '监控名称',
            width: 160,
            show: true
          },
          {
            prop: 'monitorCode',
            label: '监控编码',
            width: 90,
            show: true
          },
          {
            prop: 'systemId',
            label: '上游系统',
            show: true,
            formatter: (param) => {
              const obj = this.systemList.find((item) => {
                return item.systemId == param.systemId
              })
              return obj && (obj.systemName || '-')
            }
          },
          {
            prop: 'monitorAddr',
            label: '监控接入地址',
            width: 160,
            show: true
          },
          {
            prop: 'accessType',
            label: '接入方式',
            show: true,
            width: 100,
            render: (h, param) => {
              if (param.accessType == 1) {
                return <el-tag>摄像头</el-tag>
              } else if (param.accessType == 2) {
                return <el-tag>视频流</el-tag>
              }
              return '-'
            }
          },
          {
            prop: 'equipmentId',
            label: '设备信息',
            show: true,
            width: 160,
            formatter: (param) => {
              const obj = this.equipmentList.find((item) => {
                return item.id == param.equipmentId
              })
              if (!obj) {
                return '-'
              }
              return `${obj.equipmentName}-${obj.equipmentModel}`
            }
          },
          {
            prop: 'monitorSts',
            label: '监控状态',
            width: 90,
            show: true,
            render: (h, param) => {
              const obj = this.dict.type.monitorStatus.find((item) => {
                return item.value == param.monitorSts
              })
              if (obj) {
                return <el-tag>{obj.label}</el-tag>
              }
              return '-'
            }
          },
          {
            prop: 'isAutomatic',
            label: '是否自动录制监控',
            show: true,
            type: 'select',
            width: 90,
            formatter: (param) => {
              if (param.isAutomatic == 1) {
                return '是'
              } else if (param.isAutomatic == 2) {
                return '否'
              }
              return '-'
            }
          },
          {
            prop: 'updateTime',
            label: '更新时间',
            show: true,
            width: 160
          },
          {
            prop: 'updateUserName',
            label: '更新人',
            width: 80,
            show: true
          }
        ],
        operator: {
          width: 250,
          fixed: 'right',
          operatorBtn: [
            {
              text: '修改',
              permission: ['MONITOR_ACCESS_EDIT_BUTTON'],
              size: 'small',
              click: (row, col, cellValue) => { return this.editInfo(row) }
            },
            {
              text: '查看监控',
              permission: ['MONITOR_ACCESS_PLAY_BUTTON'],
              size: 'small',
              click: (row, col, cellValue) => { return this.viewMonitor(row) }
            },
            {
              text: '删除',
              permission: ['MONITOR_ACCESS_DEL_BUTTON'],
              size: 'small',
              type: 'danger',
              click: (row, col, cellValue) => { return this.remove(row) }
            }
          ]
        }
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    handleAdd() {
      this.$refs.moniAccessFormModel.add()
    },
    editInfo(row) {
      this.$dtModal.confirm('是否确认修改监控信息？').then(() => {
        setTimeout(() => {
          this.$refs.moniAccessFormModel.edit(row)
        }, 300)
      })
    },
    viewMonitor(row) {
      /**
       * 监控播放： dialog弹窗？播放页面？新标签页？
       * 视频组件：ifream标签？video标签？其他组件？
       * 录制截图功能：监控设备录制截图功能？前端实现截图？
      */
      // 新标签打开播放页面
      const url = this.$router.resolve({
        path: '/monitorPlay/playView',
        query: {
          monitorId: row.id,
          playType: 2,
          videoCode: row.monitorCode,
          monitorName: row.monitorName,
          monitorAddr: row.monitorAddr
        }
      })
      window.open(url.href, '_blank')

      // 普通跳转
      // this.$router.push({
      //   path: '/monitorPlay/playView'
      // })
    },
    remove(row) {
      countByMonitor(row.id).then((res) => {
        const message = res.data > 0 ? '删除该接入监控时，使用该监控的分组同样会删除监控，是否确认删除？' : '是否要删除该接入监控？'
        this.$dtModal.confirm(message).then(() => {
          delVideoMonitor({ id: row.id }).then((res) => {
            this.$message.success(res.message)
            this.getList()
          })
        })
      })
    },
    // 搜索
    handleFilter() {
      this.filterForm.pageNo = 1
      this.getList()
    },
    // 重置
    handleReset() {
      this.$refs.filterFormRef.resetFields('filterForm')
      this.handleFilter()
    },
    getList() {
      this.loading = true
      getPage(this.filterForm).then((res) => {
        this.tableOpts.tableData = res.data.rows
        this.total = res.data.totalRows
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    getSystemList() {
      getSystemName().then((res) => {
        this.systemList = res.data
        this.systemList.unshift({
          systemName: '全部',
          systemId: ''
        })
      })
    },
    getEquipmentName() {
      getEquipmentName().then((res) => {
        this.equipmentList = res.data
      })
    },
    init() {
      this.getSystemList()
      this.getEquipmentName()
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
